<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-04 11:47:53
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="460px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>添加控制事件</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30"
      :model="FormData"
      inline
      ref="Form"
      label-width="80px"
    >
      <el-form-item
        label="事件类型"
        prop="event"
        :rules="[
          { required: true, message: '请选择事件类型', trigger: 'change' },
        ]"
      >
        <el-select
          :disabled="isEdit"
          v-model="FormData.event"
          placeholder="请选择"
          style="width: 300px"
          value-key="value"
        >
          <el-option
            :label="item.label"
            :value="item"
            v-for="(item, index) in eventList"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="方式"
        prop="composeType"
        :rules="[
          { required: true, message: '请选择事件类型', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="FormData.composeType" :disabled="isEdit">
          <el-radio label="system">系统</el-radio>
          <el-radio label="custom">自定义</el-radio>
          <el-radio label="logic">逻辑编排</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="
          FormData.composeType === 'custom' || FormData.composeType === 'system'
        "
        label="事件名称"
        prop="eventName"
        :rules="[
          { required: true, message: '请输入事件名称', trigger: 'blur' },
          {
            pattern: /^(BLOCKLY\.)?[a-z_]{1}[a-zA-Z0-9_]{0,127}$/,
            message: '事件名称必须以字母或_开头，包含数字、字母及_',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (SYSTEM_RETAIN.indexOf(value) > -1) {
                callback(new Error('事件名称不能使用系统关键字或者保留字'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.eventName"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="FormData.composeType === 'logic'"
        label="编排名称"
        prop="eventName"
        :rules="[
          { required: true, message: '请输入编排名称', trigger: 'blur' },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.eventName"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="FormData.composeType === 'system'"
        label="系统行为"
        prop="systemEvent"
      >
        <i
          class="vertcal-m el-icon-circle-plus-outline iconcolor f20 poi"
          @click="addSystemEvent"
        ></i>
      </el-form-item>
      <el-form-item
        v-if="FormData.composeType === 'system' && FormData.systemEvent"
      >
        <div class="system-event-list">
          <div
            v-for="(item, i) in FormData.systemEvent"
            :key="i"
            class="system-event-list-item mb5"
          >
            <el-select
              v-model="item.eventKey"
              placeholder="请选择"
              style="width: 120px"
              class="mr10"
            >
              <el-option
                v-for="(ele, j) in SYSTEM_EVENT_ENUM"
                :label="ele.label"
                :value="ele.value"
                :key="j"
              >
              </el-option>
            </el-select>
            <el-select
              v-if="item.eventKey && !item.eventKey.startsWith('return')"
              v-model="item.comKey"
              placeholder="请选择"
              style="width: 150px"
              class="mr10"
            >
              <el-option
                :label="element.label"
                :value="element.value"
                v-for="(element, i) in item.eventKey == 'refreshTb'
                  ? tableKeyList
                  : modalKeyList"
                :key="i"
              >
              </el-option>
            </el-select>
            <i
              class="vertcal-m el-icon-delete iconcolor f20 poi"
              @click="removeSystemEvent(i)"
            ></i>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from "lodash";
import { SYSTEM_RETAIN } from "@/utils/const";
import { transformTreeFormRule } from "@/utils/common.js";
import { SYSTEM_EVENT_ENUM } from "@/utils/enum";
import storeform from "@/store";
export default {
  data() {
    return {
      SYSTEM_EVENT_ENUM,
      SYSTEM_RETAIN,
      eventList: [],
      rules: {
        event: [
          { required: true, message: "请选择事件类型", trigger: "change" },
        ],
      },
      FormData: {
        event: {},
        eventName: "",
        composeType: "custom",
        systemEvent: [],
      },
      showVisible: false,
      callback: () => {},
      isEdit: false,
    };
  },
  computed: {
    modalKeyList() {
      return (
        storeform.getters.getFormDataForMain?.template?.map((item) => {
          return { label: item.name + "-" + item.key, value: item.key };
        }) || []
      );
    },
    tableKeyList() {
      let { getNavName, getMainPageList, getTemplateDate } = storeform.getters;
      let getModelTreeList = [...getMainPageList];
      if (getNavName === "template") {
        getModelTreeList.push(...getTemplateDate.formList);
      }
      return transformTreeFormRule(
        getModelTreeList,
        (item) => {
          return (
            item.tagName == "hlTableList" ||
            item.tagName == "hlTableForChildren" ||
            item.tagName == "hlTableForRelation"
          );
        },
        (item) => {
          return { label: item.name + "-" + item.key, value: item.key };
        }
      );
    },
  },
  watch: {
    "FormData.composeType"(val) {
      this.$nextTick(() => {
        this.$refs.Form.clearValidate(["eventName"]);
      });
    },
  },
  methods: {
    returnCom(eventKey) {
      return eventKey == "refreshTb" ? this.tableKeyList : this.modalKeyList;
    },
    addSystemEvent() {
      this.FormData.systemEvent.push({
        eventKey: "",
        comKey: "",
      });
    },
    removeSystemEvent(index) {
      this.FormData.systemEvent.splice(index, 1);
    },
    editForm(FormData = {}, eventList) {
      FormData.composeType = FormData.composeType || "custom";
      this.eventList = eventList;
      this.FormData = cloneDeep(FormData);
      !this.FormData.systemEvent && this.$set(this.FormData, "systemEvent", []);
      this.isEdit = true;
      return this.showModel();
    },
    addForm(eventList) {
      this.eventList = eventList;
      this.FormData = {
        composeType: "custom",
        systemEvent: [],
      };
      this.isEdit = false;
      return this.showModel();
    },
    showModel() {
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.clearValidate();
      });
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      try {
        await this.$refs.Form.validate();
        this.showVisible = false;
        let form = cloneDeep(this.FormData);
        if (form.composeType != "system") {
          delete form.systemEvent;
        }
        form.event.tagNames = [];
        this.callback(form);
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 220px;
}
.vertcal-m {
  vertical-align: middle;
}
.el-form-item {
  display: block;
}
.system-event-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -15px 0 0 80px;
  &-item {
    flex: 0 1 100%;
  }
}
</style>
